<template>
  <div class="app-container">
    <SearchForm
      v-show="showSearch"
      v-model="queryParams"
      :options="options.formOps"
      @onQuery="getList"
    >
      <template #default="{ filterForm, handleQuery }">
        <el-form-item label="所属部门">
          <el-input
            v-model="filterForm.deptName"
            style="width: 100%"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="装置名称">
          <el-input
            v-model="filterForm.deviceName"
            style="width: 100%"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="岗位责任人">
          <el-input
            v-model="filterForm.deptUserName"
            style="width: 100%"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="单元名称">
          <el-input
            v-model="filterForm.analysisUnit"
            style="width: 100%"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="排查人员">
          <el-input
            v-model="filterForm.checkUserNames"
            style="width: 100%"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="排查内容">
          <el-input
            v-model="filterForm.hiddenContent"
            style="width: 100%"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="风险事件">
          <el-input
            v-model="filterForm.dangerEvent"
            style="width: 100%"
            @change="handleQuery"
          />
        </el-form-item>
      </template>
    </SearchForm>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          @click="handleDeploy"
          v-hasPermi="['preventionCheckTaskConfig:updateWhetherConfig']"
          >批量配置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          @click="handleFb(1)"
          v-hasPermi="['preventionCheckTaskConfig:updateWhetherRelease']"
          >批量发布</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          @click="handleFb(0)"
          v-hasPermi="['preventionCheckTaskConfig:updateWhetherRelease']"
          >批量取消发布</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain @click="handlePush()"
          >推送任务配置</el-button
        >
      </el-col> -->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <Table
      ref="table"
      :auto-featch="true"
      :fetch-data="fetchData"
      :options="options.table"
      actionWidth="240"
      @selectionChange="selectionChange"
    >
      <template #default>
        <el-table-column
          label="所属部门"
          align="center"
          key="deptName"
          prop="deptName"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          label="装置名称"
          align="center"
          key="deviceName"
          prop="deviceName"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          label="单元名称"
          key="analysisUnit"
          prop="analysisUnit"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          label="岗位责任人"
          key="deptUserName"
          prop="deptUserName"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          label="风险事件"
          align="center"
          key="dangerEvent"
          prop="dangerEvent"
          width="250"
          show-overflow-tooltip
        />
        <el-table-column
          label="排查内容"
          align="center"
          width="450"
          key="hiddenContent"
          prop="hiddenContent"
          show-overflow-tooltip
        />
        <el-table-column
          label="周期"
          align="center"
          key="cycle"
          prop="cycle"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="周期单位" align="center" key="unit" prop="unit">
        </el-table-column>

        <el-table-column
          label="任务开始时间"
          align="center"
          width="200"
          key="taskStartTime"
          prop="taskStartTime"
        />
        <el-table-column
          label="检查人员"
          align="center"
          width="200"
          key="checkUserNames"
          prop="checkUserNames"
          show-overflow-tooltip
        />
        <el-table-column
          label="是否配置"
          align="center"
          width="100"
          key="whetherConfig"
          prop="whetherConfig"
        >
          <template #default="{ row }">
            {{ row.whetherConfig == 0 ? "已配置" : "未配置" }}</template
          >
        </el-table-column>
      </template>
      <template #actionButton="{ row }">
        <el-button
          type="text"
          @click="handleEdit(row)"
          v-hasPermi="['preventionCheckTaskConfig:updateWhetherConfig']"
          >配置</el-button
        >
        <el-button
          type="text"
          @click="handleRefresh(row)"
          v-hasPermi="['preventionCheckTaskConfig:updateRefresh']"
          >刷新任务</el-button
        >
        <el-button
          type="text"
          @click="updateWhetherRelease(row.id)"
          v-hasPermi="['preventionCheckTaskConfig:updateWhetherRelease']"
          >{{ row.whetherRelease == 0 ? "取消发布" : "发布" }}</el-button
        >
        <el-button
          type="text"
          @click="updateIsStartEnd(row)"
          v-hasPermi="['preventionCheckTaskConfig:update']"
          >{{ row.isStartEnd == 0 ? "停用" : "启用" }}</el-button
        >
      </template>
      <template #dangerNames="{ row }">
        {{ row.dangerName }}
      </template>
    </Table>
    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      @onSubmit="newSubmit"
      :slots="['slot72594']"
      title="修改配置"
    >
      <template #slot72594>
        <el-form-item label="选择检查人员" prop="deptId" label-position="right">
          <el-input
            v-model="form.checkUserNames"
            readonly
            @click="onInnerOpen()"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务开始时间" prop="deptId" label-position="right">
          <el-date-picker
            type="datetime"
            v-model="form.taskStartTime"
            clearable
            style="width: 100%"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
      </template>
      <TableSelect
        ref="jkTableSelect"
        :queryApi="listUser"
        :options="[]"
        :rowKey="'userId'"
        rowLabel="nickName"
        @onConfirm="onJkConfirm"
        rowLabelText="用户昵称"
      >
        <template #formSlot="{ handleQuery, filterForm }">
          <el-col :span="8">
            <el-form-item label="部门名称">
              <el-input
                size="small"
                @change="handleQuery"
                v-model="filterForm.deptName"
                clearable
                style="width: 100%"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户名称">
              <el-input
                size="small"
                @change="handleQuery"
                v-model="filterForm.userName"
                clearable
                style="width: 100%"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
        </template>
        <template #tableSlot>
          <el-table-column
            label="部门"
            align="center"
            key="deptName"
            prop="dept.deptName"
          />
          <el-table-column
            label="用户名称"
            align="center"
            key="userName"
            prop="userName"
          />
          <el-table-column
            label="用户昵称"
            align="center"
            key="nickName"
            prop="nickName"
          />
        </template>
      </TableSelect>
    </DialogVform>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import { apis as APIS } from "@/api/yhpc/yhpcrwpz.js";
import formJson from "./components/options.json";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import TableSelect from "@/components/tableSelect/index";
import { listUser, deptTreeSelect } from "@/api/system/user";
import { pushUnit, pushControl, pushTaskConfig } from "@/api/yhpc/push";

const { proxy } = getCurrentInstance();
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["deviceName", "dangerName", "dangerLevel"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const jkTableSelect = ref();
const onInnerOpen = () => {
  const { checkUserNames, checkUserIds } = form.value;

  const values = (checkUserIds && checkUserIds.split(",")) || [];
  const names = (checkUserNames && checkUserNames.split(",")) || [];
  jkTableSelect.value.open(
    values.map((item, index) => ({
      value: values[index],
      label: names[index],
    }))
  );
};
const onJkConfirm = (data) => {
  const values = data.map((item) => item.value);
  const names = data.map((item) => item.label);
  form.value.checkUserIds = values.join(",");
  form.value.checkUserNames = names.join(",");
};

const deployType = ref("one");
const plugEdit = (row) => {
  if (row instanceof Array) {
    deployType.value = "list";
    form.value.checkUserNames = "";
    form.value.checkUserIds = "";
    form.value.taskStartTime = "";
    return row[0];
  }
  deployType.value = "one";
  form.value.checkUserNames = row.checkUserNames || "";
  form.value.checkUserIds = row.checkUserIds || "";
  form.value.taskStartTime = row.taskStartTime || "";
};
const updateWhetherRelease = (id) => {
  proxy.$modal.confirm("是否确认？").then(() => {
    APIS.updateWhetherRelease({ id }).then(() => {
      getList();
    });
  });
};
const updateIsStartEnd = (row) => {
  proxy.$modal.confirm("是否确认？").then(() => {
    APIS.update({ id: row.id, isStartEnd: row.isStartEnd == 0 ? 1 : 0 }).then(
      () => {
        getList();
      }
    );
  });
};
const { onSubmit, fetchData, handleEdit, getList, queryParams, form } =
  useAsyncData({
    APIS,
    formJson,
    dialogVform,
    table,
    proxy,
    plugEdit,
  });
const newSubmit = (data) => {
  if (deployType.value == "one") {
    onSubmit(data);
  } else {
    APIS.batchUpdateWhetherConfig({
      ids: selectList.value.map((item) => item.id),
      checkUserIds: form.value.checkUserIds,
      checkUserNames: form.value.checkUserNames,
      taskStartTime: form.value.taskStartTime,
      type: 1,
    }).then(() => {
      getList();
    });
  }
};
const selectList = ref([]);
const selectionChange = (rows) => {
  selectList.value = rows;
};

const handleFb = (type) => {
  if (selectList.value.length == 0) {
    proxy.$modal.msgError("至少选择一条数据");
    return;
  }
  proxy.$modal.confirm("是否确认操作？").then(() => {
    APIS.batchUdateWhetherRelease({
      ids: selectList.value.map((item) => item.id),
      type,
    }).then(() => {
      getList();
    });
  });
};
const handleDeploy = () => {
  if (selectList.value.length == 0) {
    proxy.$modal.msgError("至少选择一条数据");
    return;
  }
  handleEdit(selectList.value);
};
const handleRefresh = (row) => {
  APIS.updateRefresh({
    id: row.id,
    securityRiskId: row.securityRiskId,
  }).then((res) => {
    getList();
  });
};

const handlePush = (api) => {
  pushTaskConfig().then((res) => {
    if (res.msg.includes("成功")) {
      proxy.$modal.msgSuccess(res.msg);
    } else {
      proxy.$modal.msgError(res.msg);
    }
  });
};
</script>

<style lang="scss" scoped></style>
